/**
* @Description:富文本组件
* @author qpw
* @Date 2024/04/22/14:02
* @LastEditors: 乔
* @LastEditTime: 2024/06/19/14:02
* 引用@wangeditor/editor-for-vue
**/
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        :loading="loading"
        style="height: 500px; overflow-y: hidden"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onChange="onChange"
        @onCreated="onCreated"
    />
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { postUpload } from '@/api/system/upload';
import '@wangeditor/editor/dist/css/style.css'
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      loading: false,
      editor: null,
      html:'',//富文本值
      currentValue:'',
      // 工具栏配置（注意结构，否则不起作用）
      toolbarConfig:{ },//工具栏配置
      // 菜单配置（注意结构，否则不起作用）
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            // 自定义上传图片 方法
            customUpload: this.uploadImg,
            // 上传接口设置文件名
            fieldName: "file",
            meta: {
              token: getToken(),
            },
          },
          uploadVideo: {
            customUpload: this.uploadVideo,
            fieldName: "file",
            meta: {
              token: getToken(),
            },
          },
        },
      },
      mode: "default", // or 'simple'
    };
  },
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    /* 类型（base64格式、url格式） */
    type: {
      type: String,
      default: "url",
    },
  },
  watch: {
    // 监听父组件中editor值的变化
    value: {
      handler(val) {s
        console.log("富文本值",val)
        this.html=val
        this.currentValue=val
      },
      immediate: true,
    },
  },
  mounted() {
  },
  methods: {
    onCreated(editor) {
      // 一定要用 Object.seal() ，否则会报错
      this.editor = Object.seal(editor);
    },
    onChange(editor){
      // this.$emit('input', this.html)
      this.$emit('handleInput', this.html)
    },

    //自定义上传视频
    uploadVideo(file, insertFn) {
      this.loading = true;
      // let formData = new FormData();
      // formData.append("file", file);
      postUpload(file).then((res) => {
            this.loading = false;
            let row=res.data;
            if(res.code === 200){
              // 插入后端返回的url，将图片显示在页面上
              insertFn(row.fullUrl);
              this.$message({
                type: "success",
                message: "上传成功",
              });

            }else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          },
          error => {
            window.console.log(error);
            console.log("上传错误",error);
          });
    },

    //自定义上传图片
    uploadImg(file, insertFn) {
      this.loading = true;
      // let formData = new FormData();
      // formData.append("file", file);
      postUpload(file).then((res) => {
            this.loading = false;
            let row=res.data;
            console.log('上传图片:',row)
            if(res.code === 200){
              // 插入后端返回的url，将图片显示在页面上
              insertFn(row.fullUrl);
              this.$message({
                type: "success",
                message: "上传成功",
              });

            }else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          },
          error => {
            window.console.log(error);
            console.log("上传错误",error);
          });
    },

  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<!--<style src="@wangeditor/editor/dist/css/style.css"></style>-->
